<template>
    <div>
        <div ref="refColorPicker"></div>

        <!-- <div>
            <span>反转PWM值：</span>
            <div>
                <div>
                    红：
                    <i-switch v-model="target.invertPWM.R">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </div>
                <div>
                    绿：
                    <i-switch v-model="target.invertPWM.G">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </div>
                <div>
                    蓝：
                    <i-switch v-model="target.invertPWM.B">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </div>
            </div>
        </div> -->

    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, Ref, watch } from 'vue'
import { AppModel } from '../../../../model/AppModel';
import { BeLEDRGB } from '../../../../model/parts/BeLED';

const props = defineProps<{
    model: AppModel ,
    target: BeLEDRGB ,
}>()
    

let picker: any = null
const refColorPicker = ref(null) as unknown as Ref<HTMLElement>

onMounted (()=> {
    picker = new iro.ColorPicker(refColorPicker.value, {
        // color picker options
        // Option guide: https://iro.js.org/guide.html#color-picker-options
        width: 280,
        color: props.target.colorFormat() ,
        borderWidth: 1,
        borderColor: "#fff",
    })
    picker.on(["color:change"], (color: any)=>{
        console.log("color:change", color.rgb)
        props.target.set(color.rgb.r, color.rgb.g, color.rgb.b)
    })
    // window.picker = picker
})

watch(()=>props.target, ()=>{
    let color = props.target?.value
    if(!color) {
        return
    }
    picker.color.set(color)
})
</script>